<template>
    <div>
      <button @click="startRecording">开始录制</button>
      <button @click="stopRecording" :disabled="!isRecording">停止录制</button>
      <audio v-if="audioBlobUrl" :src="audioBlobUrl" controls></audio>
    </div>
  </template>
   
  <script setup  lang="ts">
  import { ref } from 'vue';
   
  const audioChunks = ref([]);
  const mediaRecorder = ref<any>('');
  const audioBlobUrl = ref(null);
  const isRecording = ref(false);
   
  const startRecording = async () => {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    mediaRecorder.value = new MediaRecorder(stream, { mimeType: 'audio/webm' });
   
    mediaRecorder.value.ondataavailable = (event:any) => {
      if (event.data && event.data.size > 0) {
        audioChunks.value.push(event.data);
      }
    };
   
    mediaRecorder.value.start();
    isRecording.value = true;
  };
   
  const stopRecording = () => {
    mediaRecorder.value.stop();
    isRecording.value = false;
      mediaRecorder.value.onstop = () => {
            const blob = new Blob(audioChunks.value, { type: 'audio/webm' });
            audioBlobUrl.value = URL.createObjectURL(blob);
            console.log(audioBlobUrl.value,'audioBlobUrl.value')
        };
  };
   

  </script>